<template>
  <div id="webgl-container" class="webgl-container">
    <canvas id="webgl" class="webgl"/>
  </div>

  <MoreInfo>
    <p>
      <el-link
        href="https://threejs.org/examples/#webgl_animation_keyframes"
        type="primary"
        target="_blank"
      >官网示例</el-link
      >
      <el-link href="https://threejs.org/docs/" type="primary" target="_blank"
      >文档</el-link
      >
      <el-link
        href="https://threejs.org/manual/#zh/fundamentals"
        type="primary"
        target="_blank"
      >基础信息介绍</el-link
      >
    </p>
    <p>
      <el-link
        href="https://discoverthreejs.com/zh/"
        type="primary"
        target="_blank"
      >Discover three.js</el-link
      >
      <el-link
        href="https://threejsresources.com/"
        type="primary"
        target="_blank"
      >threejsresources</el-link
      >
      <el-link
        href="https://www.awwwards.com/awwwards/collections/three-js/"
        type="primary"
        target="_blank"
      >awwwards</el-link
      >
      <el-link href="https://dev.to/t/threejs" type="primary" target="_blank"
      >https://dev.to/t/threejs</el-link
      >
      <el-link href="https://gcat.cc/" type="primary" target="_blank"
      >https://gcat.cc/</el-link
      >
    </p>
  </MoreInfo>
</template>

<script setup>
import { BoxGeometry, Mesh, MeshBasicMaterial, SphereGeometry } from 'three'

import MoreInfo from '@/components/MoreInfo.vue'
import { useThree } from '@/hooks/use-three-hook'

const { scene, camera, addAnimationCallback } = useThree()

// 创建对象
let cube
let sphere

onMounted(() => {
  if (scene.value && camera.value) {
    // 创建立方体
    const cubeGeometry = new BoxGeometry(1, 1, 1)
    const cubeMaterial = new MeshBasicMaterial({ color: 0x00ff00 })
    cube = new Mesh(cubeGeometry, cubeMaterial)
    cube.position.x = -2
    scene.value.add(cube)

    // 创建球体
    const sphereGeometry = new SphereGeometry(0.5, 32, 32)
    const sphereMaterial = new MeshBasicMaterial({ color: 0xff0000 })
    sphere = new Mesh(sphereGeometry, sphereMaterial)
    sphere.position.x = 2
    scene.value.add(sphere)

    // 添加自定义动画逻辑
    addAnimationCallback((delta, elapsedTime) => {
      // 立方体旋转
      if (cube) {
        cube.rotation.x += delta
        cube.rotation.y += delta * 0.5
      }

      // 球体上下移动（正弦运动）
      if (sphere) {
        sphere.position.y = Math.sin(elapsedTime) * 1.5
      }

      // 颜色变化
      if (sphere && sphere.material instanceof MeshBasicMaterial) {
        const hue = elapsedTime * 0.1 % 1
        sphere.material.color.setHSL(hue, 1, 0.5)
      }
    })
  }
})
</script>
